import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import { DownOutlined, InfoCircleOutlined, PlusOutlined } from '@ant-design/icons';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import {
  Row,
  Col,
  Card,
  Button,
  Dropdown,
  Menu,
  Modal,
  message,
  Divider,
  Tabs,
  DatePicker,
  Select,
  Badge,
  Radio,
} from 'antd';
import queryString from 'query-string';
import moment from 'moment';
import router from 'umi/router';
import StandardTable from '@/components/StandardTable';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import Authorized from '@/utils/Authorized';
import styles from '@/utils/utils.less';
import downloadFile from '@/utils/utils';
import { checkPermissions } from '@/utils/authority';
import getSys from './judgeSys';

const FormItem = Form.Item;
const { TabPane } = Tabs;
const { confirm } = Modal;
const { RangePicker } = DatePicker;
const { Option } = Select;
const RadioButton = Radio.Button;
const RadioGroup = Radio.Group;
@connect(({ annualbasic, loading, login }) => ({
  annualbasic,
  tabList: annualbasic.tabList,
  activeKey: annualbasic.activeKey,
  loading: loading.models.annualbasic,
  pageData: annualbasic.pageData,
  formFieldsValue: annualbasic.formFieldsValue,
  clt: annualbasic.clt,
  cusCount: annualbasic.cusCount,
  EXPORT_MERGE_TYPE: annualbasic.EXPORT_MERGE_TYPE,
  login,
  areaList: annualbasic.areaList,
  submitOs: annualbasic.submitOs,
}))
@Form.create()
class AdjustBase extends PureComponent {
  state = {
    userType: '',
    selectedRowKeys: [],
    selectedRows: [],
    declarationFlag: false,
    filingFlag: false,
    downloadCollectionFlag: false,
    stateMap: ['', 'success', 'default'],
  };

  tableSearchLayout = {
    labelCol: {
      lg: {
        span: 7,
      },
      xl: {
        span: 6,
      },
      xxl: {
        span: 4,
      },
    },
    wrapperCol: {
      xxl: {
        span: 17,
      },
    },
  };

  componentDidMount() {
    const {
      location,
      activeKey,
      dispatch,
      pageData: { pagination },
      login,
      submitOs,
    } = this.props;
    // 判断权限
    const { systemList, baseUser } = login;
    const userType = getSys(systemList, baseUser, location);
    dispatch({
      type: 'annualbasic/areaList',
      payload: {
        suppId: baseUser.suppId,
      },
    });
    const { isMenuLink } = queryString.parse(location.search);
    const { queryParam } = location;
    const tempActiveKey = queryString.parse(location.search).activeKey || activeKey;
    dispatch({
      type: 'annualbasic/updateModelData',
      payload: {
        activeKey: tempActiveKey,
      },
    });
    this.setState(
      {
        userType,
      },
      () => {
        if (isMenuLink === 'true') {
          this.resetAndGeLlist(location);
        } else if (isMenuLink === 'false') {
          if (queryParam) {
            dispatch({
              type: 'annualbasic/updateModelData',
              payload: {
                formFieldsValue: queryParam,
              },
            });
          }
          // 暂时没有false保留参数
          this.getList(tempActiveKey, pagination.current, pagination.pageSize, submitOs);
        } else {
          this.getList(tempActiveKey, pagination.current, pagination.pageSize, submitOs);
        }
      }
    );
    dispatch({
      type: 'annualbasic/fetchDictionaries',
      payload: ['EXPORT_MERGE_TYPE'],
    });
  }

  componentWillUnmount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'annualbasic/updateModelData',
      payload: {
        ADJ_FINIASH_TYPE: [],
        PAY_FEES_WAY: [],
        cusCount: 0,
        clt: {},
        declarationData: {},
        updateYmOpts: [],
        accoNameList: [],
      },
    });
  }

  // 查找列表
  getList = (activeKey = '1', currentPage = 1, pageSize = 10, submitOs = 0) => {
    // 判断权限
    this.setState({
      selectedRowKeys: [],
      selectedRows: [],
    });
    const { form, dispatch } = this.props;
    const { userType } = this.state;
    form.validateFields(['dateArr', 'areaId'], (err, fieldsValue) => {
      if (err) return;
      dispatch({
        type: 'annualbasic/updateModelData',
        payload: {
          activeKey,
          formFieldsValue: fieldsValue,
        },
      });
      const tempValues = {};
      Object.keys(fieldsValue).forEach(key => {
        if (fieldsValue[key] === undefined) {
          tempValues[key] = null;
        } else if (fieldsValue[key] && key === 'dateArr') {
          tempValues.adjTskBeginDate =
            (fieldsValue.dateArr &&
              fieldsValue.dateArr[0] &&
              +moment(fieldsValue.dateArr[0].valueOf())) ||
            null;
          tempValues.adjTskEndDate =
            (fieldsValue.dateArr &&
              fieldsValue.dateArr[1] &&
              +moment(fieldsValue.dateArr[1].valueOf())) ||
            null;
        } else {
          tempValues[key] = fieldsValue[key];
        }
      });

      delete tempValues.dateArr;
      tempValues.submitOs = submitOs;
      const pageArg = { currentPage, pageSize };
      const params = {
        state: activeKey,
        ...tempValues,
        pageArg,
      };
      // 运行和客服;
      if (Number(userType) === 4 || Number(userType) === 1) {
        dispatch({
          type: 'annualbasic/fetchList',
          payload: params,
        });
      }
      // 自主
      if (String(userType) === 'independence') {
        dispatch({
          type: 'annualbasic/getListIndependence',
          payload: params,
        });
      }
      // 接单
      if (String(userType) === 'receive') {
        dispatch({
          type: 'annualbasic/getListIndependence',
          payload: params,
        });
      }
      // 发单
      if (String(userType) === 'send') {
        dispatch({
          type: 'annualbasic/getListBilling',
          payload: params,
        });
      }
    });
  };

  // 切换页码
  stateChange = key => {
    const {
      location,
      pageData: {
        pagination: { current, pageSize },
      },
      dispatch,
    } = this.props;
    router.push({
      pathname: location.pathname,
      query: {
        activeKey: key,
      },
    });
    dispatch({
      type: 'annualbasic/updateModelData',
      payload: {
        activeKey: key,
        submitOs: 0,
      },
    });
    this.getList(key, current, pageSize, 0);
  };

  // 重置
  handleFormReset = () => {
    const { form, dispatch } = this.props;
    form.resetFields();
    form.setFieldsValue({ dateArr: null });
    dispatch({
      type: 'annualbasic/updateModelData',
      payload: {
        formFieldsValue: {},
      },
    });
  };

  // 删除
  showDelCollection = record => {
    const {
      dispatch,
      activeKey,
      pageData: { pagination },
    } = this.props;
    dispatch({
      type: 'annualbasic/fetchCusCount',
      payload: {
        yearAdjTskId: record.yearAdjTskId,
      },
    }).then(res => {
      if (!res) return;
      confirm({
        icon: <InfoCircleOutlined />,
        content: `已采集${res.data}个客户，确定要删除吗`,
        okText: '确定',
        cancelText: '取消',
        onCancel: () => {},
        onOk: () => {
          dispatch({
            type: 'annualbasic/delCollection',
            payload: {
              yearAdjTskId: record.yearAdjTskId,
            },
          }).then(response => {
            if (response.success) {
              message.success('操作成功！');
              this.getList(activeKey, pagination.currentPage, pagination.pageSize);
            } else {
              message.warning(response.message || '服务端错误');
            }
          });
        },
      });
    });
  };

  // 显示导出申报明细表弹窗
  showDeclaration = record => {
    const { dispatch } = this.props;
    this.setState({
      declarationFlag: true,
    });
    dispatch({
      type: 'annualbasic/updateModelData',
      payload: {
        clt: record,
      },
    });
  };

  // 导出申报明细表
  handleDeclarationOk = () => {
    const { clt, activeKey } = this.props;
    const params = {
      yearAdjTskId: clt.yearAdjTskId,
      state: activeKey,
    };
    const { userType } = this.state;
    // 运行和客服;
    if (Number(userType) === 4 || Number(userType) === 1) {
      this.download(params, '/osApi/annualAdj/accoDeclareByOs/downFileZip');
    }
    // 自主
    if (String(userType) === 'independence') {
      this.download(params, '/osApi/annualAdj/independentSupp/decl/downFileZip');
    }
    // 接单
    if (String(userType) === 'receive') {
      this.download(params, '/osApi/annualAdj/independentSupp/decl/downFileZip');
    }
    // 发单
    if (String(userType) === 'send') {
      this.download(params, '/osApi/annualAdj/accoDeclareBySend/downFileZip');
    }
    this.setState({
      declarationFlag: false,
    });
  };

  // 导出申报明细表取消
  handleDeclarationCancel = () => {
    this.setState({
      declarationFlag: false,
    });
  };

  // 开始申报弹窗
  startFiling = record => {
    const { dispatch } = this.props;
    dispatch({
      type: 'annualbasic/updateModelData',
      payload: {
        clt: record,
      },
    });
    this.setState({
      filingFlag: true,
    });
  };

  // 开始申报确定
  handleFilingOk = () => {
    const {
      dispatch,
      clt,
      activeKey,
      pageData: { pagination },
    } = this.props;
    dispatch({
      type: 'annualbasic/startFiling',
      payload: {
        yearAdjTskId: clt.yearAdjTskId,
      },
    }).then(res => {
      if (!res.success) {
        message.warning(res.message || '服务端错误');
      }
      this.setState({
        filingFlag: false,
      });
      this.getList(activeKey, pagination.current, pagination.pageSize);
    });
  };

  // 开始办理取消
  handleFilingCancel = () => {
    this.setState({
      filingFlag: false,
    });
  };

  download = (params, url) => {
    downloadFile(params, url, 'POST');
  };

  // 下载Excel
  downloadExcel = record => {
    const { activeKey } = this.props;
    const { userType } = this.state;
    const params = {
      yearAdjTskId: record.yearAdjTskId,
      state: activeKey,
    };

    // 运行客服
    if (Number(userType) === 4 || Number(userType) === 1) {
      this.download(params, '/osApi/annualAdj/accoDeclareByOs/downFileZip');
    }
    // 自主
    if (String(userType) === 'independence') {
      this.download(params, '/osApi/annualAdj/independentSupp/decl/downFileZip');
    }
    // 接单
    if (String(userType) === 'receive') {
      this.download(params, '/osApi/annualAdj/independentSupp/decl/downFileZip');
    }
    // 发单
    if (String(userType) === 'send') {
      this.download(params, '/osApi/annualAdj/accoDeclareBySend/downFileZip');
    }
  };

  // 跳转申报结果导入
  goImportDeclaration = record => {
    router.push({
      pathname: '/more/annualbasicadjust/importdecl',
      query: {
        yearAdjTskId: record.yearAdjTskId,
      },
    });
  };

  // 跳转更新数据
  goUpdateInfoProgress = record => {
    const { dispatch } = this.props;
    dispatch({
      type: 'annualbasic/updateModelData',
      payload: {
        clt: record,
      },
    });
    router.push(`/more/annualbasicadjust/updateinfo?yearAdjTskId=${record.yearAdjTskId}`);
  };

  handleSelectRows = (rows, rowKeys) => {
    this.setState({ selectedRows: rows, selectedRowKeys: rowKeys });
  };

  handleStandardTableChange = pagination => {
    const { activeKey } = this.props;
    this.getList(activeKey, pagination.current, pagination.pageSize);
  };

  // 下载采集表弹窗
  showDownloadCollection = record => {
    const { dispatch } = this.props;
    dispatch({
      type: 'annualbasic/queryParamByArea',
      payload: {
        areaId: record.areaId,
      },
    }).then(res => {
      const { userType } = this.state;
      if (+res.data.insUnifyFlag === 2) {
        // this.setState({ downloadCollectionFlag: true });
        dispatch({
          type: 'annualbasic/updateModelData',
          payload: {
            clt: record,
          },
        });
        this.handleConllectionOk()
      } else {
        const params = {
          yearAdjTskId: record.yearAdjTskId,
          areaId: record.areaId,
          mergeFlag: 1,
        };
        // 客服
        if (Number(userType) === 4 || Number(userType) === 1) {
          this.download(params, '/osApi/annualAdj/custCollectByCs/downFileZip');
        }
        // 自主
        if (String(userType) === 'independence') {
          this.download(params, '/osApi/annualAdj/independentSupp/collect/downFileZip');
        }
        // 接单
        if (String(userType) === 'receive') {
          this.download(params, '/osApi/annualAdj/independentSupp/collect/downFileZip');
        }
        // 发单
        if (String(userType) === 'send') {
          this.download(params, '/osApi/annualAdj/sendEmpCollectBySend/downFileZip');
        }
      }
    });
  };

  // 下载采集表取消
  handleConllectionCancel = () => {
    this.setState({
      downloadCollectionFlag: false,
    });
  };

  // 下载采集表确定
  handleConllectionOk = () => {
    const { form, clt } = this.props;
    const { userType } = this.state;
    // form.validateFields(['mergeFlag'], (err, values) => {
    //   if (err) return;
      const params = {
        yearAdjTskId: clt.yearAdjTskId,
        areaId: clt.areaId,
        mergeFlag: '1',
      };
      // 客服
      if (Number(userType) === 4 || Number(userType) === 1) {
        this.download(params, '/osApi/annualAdj/custCollectByCs/downFileZip');
      }
      // 自主
      if (String(userType) === 'independence') {
        this.download(params, '/osApi/annualAdj/independentSupp/collect/downFileZip');
      }
      // 接单
      if (String(userType) === 'receive') {
        this.download(params, '/osApi/annualAdj/independentSupp/collect/downFileZip');
      }
      // 发单
      if (String(userType) === 'send') {
        this.download(params, '/osApi/annualAdj/sendEmpCollectBySend/downFileZip');
      }
      this.setState({
        downloadCollectionFlag: false,
      });
    // });
  };

  // 切换提交
  submitOsChange = e => {
    const {
      dispatch,
      activeKey,
      pageData: {
        pagination: { current, pageSize },
      },
    } = this.props;
    dispatch({
      type: 'annualbasic/updateModelData',
      payload: {
        submitOs: e.target.value,
      },
    });
    this.getList(activeKey, current, pageSize, e.target.value);
  };

  // 跳转详情
  goDetails = record => {
    const { userType } = this.state;
    const { activeKey } = this.props;
    if (Number(userType) === 4 || Number(userType) === 1) {
      router.push(
        `/more/annualbasic/detail?yearAdjTskId=${record.yearAdjTskId}&&activeKey=${activeKey}`
      );
    }
    // 自主
    if (String(userType) === 'independence') {
      router.push(
        `/more/localannualbasic/detail?yearAdjTskId=${record.yearAdjTskId}&&activeKey=${activeKey}`
      );
    }
    // 接单
    if (String(userType) === 'receive') {
      router.push(
        `/more/localannualbasic/detail?yearAdjTskId=${record.yearAdjTskId}&&activeKey=${activeKey}`
      );
    }
    // 发单
    if (String(userType) === 'send') {
      router.push(
        `/more/sendannualbasic/detail?yearAdjTskId=${record.yearAdjTskId}&&activeKey=${activeKey}`
      );
    }
  };

  // 刷新进度
  refreshProgress = record => {
    const { dispatch } = this.props;
    dispatch({
      type: 'annualbasic/refreshProgress',
      payload: {
        yearAdjTskId: record.yearAdjTskId,
      },
    });
  };

  // 确认采集
  confirmCollection = () => {
    const { selectedRowKeys } = this.state;
    const {
      activeKey,
      dispatch,
      pageData: { pagination },
    } = this.props;
    if (selectedRowKeys.length === 0) {
      message.warning('请至少选择一项！');
    } else {
      dispatch({
        type: 'annualbasic/confirmCollection',
        payload: {
          listYearAdjTskId: selectedRowKeys,
        },
      }).then(res => {
        if (res && res.success) {
          this.getList(activeKey, pagination.current, pagination.pageSize);
        }
      });
    }
  };

  // 发起采集任务
  initiateTask = () => {};

  // 提交运行
  submitrun = () => {
    const {
      activeKey,
      dispatch,
      pageData: { pagination },
    } = this.props;
    const { selectedRowKeys } = this.state;
    if (selectedRowKeys.length === 0) {
      message.warning('请至少选择一项！');
    } else {
      dispatch({
        type: 'annualbasic/submitrun',
        payload: {
          listYearAdjTskId: selectedRowKeys,
        },
      }).then(res => {
        if (res && res.success) {
          this.getList(activeKey, pagination.current, pagination.pageSize);
        }
      });
    }
  };

  async resetAndGeLlist(location) {
    const { dispatch } = this.props;
    dispatch({
      type: 'annualbasic/updateModelData',
    });
    await this.handleFormReset();
    await this.getList(location.query.activeKey);
    dispatch({
      type: 'global/changeIsMenuLink',
      payload: location,
    });
  }

  render() {
    const {
      form: { getFieldDecorator },
      tabList,
      activeKey,
      loading,
      pageData,
      clt,
      EXPORT_MERGE_TYPE,
      formFieldsValue,
      areaList,
      submitOs,
    } = this.props;
    const {
      selectedRowKeys,
      selectedRows,
      declarationFlag,
      filingFlag,
      downloadCollectionFlag,
      userType,
      stateMap,
    } = this.state;
    const diffShow = userType === 'receive' ? styles.show : styles.hide;
    const menuWaiting = record => (
      <Menu>
        <Menu.Item key="update">
          <a
            onClick={() =>
              router.push(`/more/annualbasicadjust/update?yearAdjTskId=${record.yearAdjTskId}`)
            }
          >
            修改
          </a>
        </Menu.Item>
        <Menu.Item>
          <a onClick={() => this.showDelCollection(record)}>删除</a>
        </Menu.Item>
      </Menu>
    );
    const menuCollected = record => (
      <Menu>
        <Menu.Item key="detail">
          <a onClick={() => this.goDetails(record)}>查看</a>
        </Menu.Item>
        {checkPermissions('business:annual:updateEmpInfo') && (
          <Menu.Item>
            <a onClick={() => this.goUpdateInfoProgress(record)}>更新数据</a>
          </Menu.Item>
        )}
        {checkPermissions('business:annual:updateDeclareStateByOs') && (
          <Menu.Item>
            <a onClick={() => this.startFiling(record)}>开始申报</a>
          </Menu.Item>
        )}
      </Menu>
    );
    const menuDeclaration = record => (
      <Menu>
        <Menu.Item key="detail">
          <a onClick={() => this.goDetails(record)}>查看</a>
        </Menu.Item>
        <Menu.Item>
          <a onClick={() => this.downloadExcel(record)}>导出Excel</a>
        </Menu.Item>
      </Menu>
    );
    const columns1Render = record => {
      if (record.state === 9) {
        return (
          <span>
            数据生成中...
            <a onClick={() => this.refreshProgress(record)}>刷新进度</a>
          </span>
        );
      }
      if (userType === 'receive') {
        return (
          <span>
            <span>
              <a onClick={() => this.goDetails(record)}>查看</a>
            </span>
            <Authorized authority="business:annual:listExportCustCollectByCs" noMatch={null}>
              <Divider type="vertical" />
              <a onClick={() => this.showDownloadCollection(record)}>下载采集表</a>
            </Authorized>
          </span>
        );
      }
      return (
        <span>
          <Authorized authority="business:annual:getAnnualAdjMainTsk" noMatch={null}>
            <a onClick={() => this.goDetails(record)}>查看</a>
          </Authorized>
          {checkPermissions('business:annual:updateAnnualAdjMainTsk') &&
          checkPermissions('business:annual:deleteAnnualAdjMainTsk') ? (
            <Fragment>
              <Divider type="vertical" />
              <Dropdown overlay={menuWaiting(record)}>
                <a>
                  更多 <DownOutlined />
                </a>
              </Dropdown>
            </Fragment>
          ) : (
            (checkPermissions('business:annual:updateAnnualAdjMainTsk') && (
              <Fragment>
                <Divider type="vertical" />
                <a
                  onClick={() =>
                    router.push(`/more/annualbasic/update?yearAdjTskId=${record.yearAdjTskId}`)
                  }
                >
                  修改
                </a>
              </Fragment>
            ),
            checkPermissions('business:annual:deleteAnnualAdjMainTsk') && (
              <Fragment>
                <Divider type="vertical" />
                <a onClick={() => this.showDelCollection(record)}>删除</a>
              </Fragment>
            ))
          )}
        </span>
      );
    };
    const columns2Render = record => {
      if (record.state === 8) {
        return (
          <span>
            数据更新中...
            <a onClick={() => this.refreshProgress(record)}>刷新进度</a>
          </span>
        );
      }
      if (userType === 'receive') {
        return (
          <span>
            <a onClick={() => this.goDetails(record)}>查看</a>
            <Authorized authority="business:annual:listExportCustCollectByCs" noMatch={null}>
              <Divider type="vertical" />
              {Number(userType) === 1 ? null : (
                <Fragment>
                  <Divider type="vertical" />
                  <a onClick={() => this.showDownloadCollection(record)}>导出Excel</a>
                </Fragment>
              )}
            </Authorized>
          </span>
        );
      }
      return (
        <span>
          <Authorized authority="business:annual:listExportAccoCollectByOs" noMatch={null}>
            <a onClick={() => this.showDeclaration(record)}>导出申报明细表</a>
          </Authorized>
          {checkPermissions('business:annual:updateEmpInfo') ||
          checkPermissions('business:annual:updateDeclareStateByOs') ? (
            <Fragment>
              <Divider type="vertical" />
              <Dropdown overlay={menuCollected(record)}>
                <a>
                  更多 <DownOutlined />
                </a>
              </Dropdown>
            </Fragment>
          ) : (
            <a onClick={() => this.goDetails(record)}>查看</a>
          )}
        </span>
      );
    };
    const columns3Render = record => {
      if (userType === 'receive') {
        return (
          <span>
            <a onClick={() => this.goDetails(record)}>查看</a>
            <Authorized authority="business:annual:listExportAccoCollectByOs" noMatch={null}>
              <Divider type="vertical" />
              <a onClick={() => this.downloadExcel(record)}>导出Excel</a>
            </Authorized>
          </span>
        );
      }
      return (
        <span>
          <Authorized authority="business:annual:saveImExportAloneAccoCollectByOs" noMatch={null}>
            <a onClick={() => this.goImportDeclaration(record)}>申报结果导入</a>
          </Authorized>
          {checkPermissions('business:annual:listExportAccoCollectByOs') ? (
            <Fragment>
              <Divider type="vertical" />
              <Dropdown overlay={menuDeclaration(record)}>
                <a>
                  更多 <DownOutlined />
                </a>
              </Dropdown>
            </Fragment>
          ) : (
            <a onClick={() => this.goDetails(record)}>查看</a>
          )}
        </span>
      );
    };
    const columns4Render = record => {
      if (userType === 'receive') {
        return (
          <span>
            <a onClick={() => this.goDetails(record)}>查看</a>
            <Authorized authority="business:annual:listExportAccoCollectByOs" noMatch={null}>
              <Divider type="vertical" />
              <a onClick={() => this.downloadExcel(record)}>导出Excel</a>
            </Authorized>
          </span>
        );
      }
      return (
        <span>
          <a onClick={() => this.goDetails(record)}>查看</a>
          <Authorized authority="business:annual:listExportAccoCollectByOs" noMatch={null}>
            <Divider type="vertical" />
            <a onClick={() => this.downloadExcel(record)}>导出Excel</a>
          </Authorized>
        </span>
      );
    };
    const columns1 = [
      {
        title: '地区',
        dataIndex: 'areaName',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
          },
        }),
      },
      {
        title: '险种',
        dataIndex: 'adjAssName',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
          },
        }),
      },
      {
        title: '签约方',
        className: diffShow,
        dataIndex: 'corpName',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
          },
        }),
      },
      {
        title: '采集开始日期',
        dataIndex: 'adjTskBeginDate',
        onCell: () => ({
          style: {
            textAlign: 'center',
          },
        }),
        onHeaderCell: () => ({
          style: {
            textAlign: 'center',
            fontWeight: 'bold',
          },
        }),
        render: text => moment(text).format('YYYY-MM-DD'),
      },

      {
        title: '采集结束日期',
        dataIndex: 'adjTskEndDate',
        onCell: () => ({
          style: {
            textAlign: 'center',
          },
        }),
        onHeaderCell: () => ({
          style: {
            textAlign: 'center',
            fontWeight: 'bold',
          },
        }),
        render: text => moment(text).format('YYYY-MM-DD'),
      },

      {
        title: '生效年月',
        dataIndex: 'validYm',
        onCell: () => ({
          style: {
            textAlign: 'center',
          },
        }),
        onHeaderCell: () => ({
          style: {
            textAlign: 'center',
            fontWeight: 'bold',
          },
        }),
        render: text => moment(text).format('YYYY-MM'),
      },
      {
        title: '操作',
        width: 200,
        onCell: () => ({
          style: {
            textAlign: 'center',
          },
        }),
        onHeaderCell: () => ({
          style: {
            textAlign: 'center',
            fontWeight: 'bold',
          },
        }),
        render: (text, record) => columns1Render(record),
      },
    ];
    const columns2 = [
      {
        title: '地区',
        dataIndex: 'areaName',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
          },
        }),
      },
      {
        title: '险种',
        dataIndex: 'adjAssName',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
          },
        }),
      },
      {
        title: '签约方',
        className: diffShow,
        dataIndex: 'corpName',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
          },
        }),
      },
      {
        title: '采集开始日期',
        dataIndex: 'adjTskBeginDate',
        onCell: () => ({
          style: {
            textAlign: 'center',
          },
        }),
        onHeaderCell: () => ({
          style: {
            textAlign: 'center',
            fontWeight: 'bold',
          },
        }),
        render: text => moment(text).format('YYYY-MM-DD'),
      },

      {
        title: '采集结束日期',
        dataIndex: 'adjTskEndDate',
        onCell: () => ({
          style: {
            textAlign: 'center',
          },
        }),
        onHeaderCell: () => ({
          style: {
            textAlign: 'center',
            fontWeight: 'bold',
          },
        }),
        render: text => moment(text).format('YYYY-MM-DD'),
      },

      {
        title: '生效年月',
        dataIndex: 'validYm',
        onCell: () => ({
          style: {
            textAlign: 'center',
          },
        }),
        onHeaderCell: () => ({
          style: {
            textAlign: 'center',
            fontWeight: 'bold',
          },
        }),
        render: text => moment(text).format('YYYY-MM'),
      },
      {
        title: '提交状态',
        className: diffShow,
        dataIndex: 'submitOsName',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
          },
        }),
        render: (text, record) => (
          <Badge key={record.submitOs} status={stateMap[record.submitOs]} text={text} />
        ),
      },
      {
        title: '操作',
        width: 200,
        onCell: () => ({
          style: {
            textAlign: 'center',
          },
        }),
        onHeaderCell: () => ({
          style: {
            textAlign: 'center',
            fontWeight: 'bold',
          },
        }),
        render: (text, record) => columns2Render(record),
      },
    ];

    const columns3 = [
      {
        title: '地区',
        dataIndex: 'areaName',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
          },
        }),
      },
      {
        title: '险种',
        dataIndex: 'adjAssName',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
          },
        }),
      },
      {
        title: '签约方',
        className: diffShow,
        dataIndex: 'corpName',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
          },
        }),
      },
      {
        title: '采集开始日期',
        dataIndex: 'adjTskBeginDate',
        onCell: () => ({
          style: {
            textAlign: 'center',
          },
        }),
        onHeaderCell: () => ({
          style: {
            textAlign: 'center',
            fontWeight: 'bold',
          },
        }),
        render: text => moment(text).format('YYYY-MM-DD'),
      },

      {
        title: '采集结束日期',
        dataIndex: 'adjTskEndDate',
        onCell: () => ({
          style: {
            textAlign: 'center',
          },
        }),
        onHeaderCell: () => ({
          style: {
            textAlign: 'center',
            fontWeight: 'bold',
          },
        }),
        render: text => moment(text).format('YYYY-MM-DD'),
      },

      {
        title: '生效年月',
        dataIndex: 'validYm',
        onCell: () => ({
          style: {
            textAlign: 'center',
          },
        }),
        onHeaderCell: () => ({
          style: {
            textAlign: 'center',
            fontWeight: 'bold',
          },
        }),
        render: text => moment(text).format('YYYY-MM'),
      },
      {
        title: '操作',
        width: 200,
        onCell: () => ({
          style: {
            textAlign: 'center',
          },
        }),
        onHeaderCell: () => ({
          style: {
            textAlign: 'center',
            fontWeight: 'bold',
          },
        }),
        render: (text, record) => columns3Render(record),
      },
    ];
    const columns4 = [
      {
        title: '地区',
        dataIndex: 'areaName',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
          },
        }),
      },
      {
        title: '险种',
        dataIndex: 'adjAssName',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
          },
        }),
      },
      {
        title: '签约方',
        className: diffShow,
        dataIndex: 'corpName',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
          },
        }),
      },
      {
        title: '采集开始日期',
        dataIndex: 'adjTskBeginDate',
        onCell: () => ({
          style: {
            textAlign: 'center',
          },
        }),
        onHeaderCell: () => ({
          style: {
            textAlign: 'center',
            fontWeight: 'bold',
          },
        }),
        render: text => moment(text).format('YYYY-MM-DD'),
      },

      {
        title: '采集结束日期',
        dataIndex: 'adjTskEndDate',
        onCell: () => ({
          style: {
            textAlign: 'center',
          },
        }),
        onHeaderCell: () => ({
          style: {
            textAlign: 'center',
            fontWeight: 'bold',
          },
        }),
        render: text => moment(text).format('YYYY-MM-DD'),
      },

      {
        title: '生效年月',
        dataIndex: 'validYm',
        onCell: () => ({
          style: {
            textAlign: 'center',
          },
        }),
        onHeaderCell: () => ({
          style: {
            textAlign: 'center',
            fontWeight: 'bold',
          },
        }),
        render: text => moment(text).format('YYYY-MM'),
      },
      {
        title: '操作',
        width: 200,
        onCell: () => ({
          style: {
            textAlign: 'center',
          },
        }),
        onHeaderCell: () => ({
          style: {
            textAlign: 'center',
            fontWeight: 'bold',
          },
        }),
        render: (text, record) => columns4Render(record),
      },
    ];

    const tabPane1 = (
      <div>
        <Row>
          <Authorized authority="business:annual:saveAnnualAdjMainTsk" noMatch={null}>
            <Button
              style={{ marginRight: 8, marginBottom: 20 }}
              type="primary"
              icon={<PlusOutlined />}
              onClick={() => router.push('/more/annualbasicadjust/add')}
            >
              新增采集任务
            </Button>
          </Authorized>
        </Row>
        <StandardTable
          selectedRows={selectedRows}
          selectedRowKeys={selectedRowKeys}
          loading={loading}
          data={pageData}
          rowKey="yearAdjTskId"
          columns={columns1}
          onSelectRow={this.handleSelectRows}
          onChange={this.handleStandardTableChange}
        />
      </div>
    );
    const tabPane2 = (
      <div>
        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
          <div>
            <Authorized authority="business:annual:updateSubmitOs" noMatch={null}>
              <Button
                style={{ marginRight: 8, marginBottom: 16 }}
                type="primary"
                onClick={() => this.submitrun()}
              >
                提交运行
              </Button>
            </Authorized>
          </div>
          <div>
            <div style={{ display: 'flex', alignItems: 'center' }}>
              <Authorized authority="business:annual:updateSubmitOs" noMatch={null}>
                <RadioGroup value={submitOs} onChange={this.submitOsChange}>
                  <RadioButton value={0}>全部</RadioButton>
                  <RadioButton value={2}>待提交</RadioButton>
                  <RadioButton value={1}>已提交</RadioButton>
                </RadioGroup>
              </Authorized>
            </div>
          </div>
        </div>
        <StandardTable
          selectedRows={selectedRows}
          selectedRowKeys={selectedRowKeys}
          loading={loading}
          data={pageData}
          rowKey="yearAdjTskId"
          columns={columns2}
          onSelectRow={this.handleSelectRows}
          onChange={this.handleStandardTableChange}
        />
      </div>
    );
    const tabPane3 = (
      <div>
        <StandardTable
          selectedRows={selectedRows}
          selectedRowKeys={selectedRowKeys}
          loading={loading}
          data={pageData}
          rowKey="yearAdjTskId"
          columns={columns3}
          onSelectRow={this.handleSelectRows}
          onChange={this.handleStandardTableChange}
        />
      </div>
    );
    const tabPane4 = (
      <div>
        <StandardTable
          selectedRows={selectedRows}
          selectedRowKeys={selectedRowKeys}
          loading={loading}
          data={pageData}
          rowKey="yearAdjTskId"
          columns={columns4}
          onSelectRow={this.handleSelectRows}
          onChange={this.handleStandardTableChange}
        />
      </div>
    );

    const tabPaneTem = ['', tabPane1, '', tabPane2, tabPane3, tabPane4];
    const formItemLayout = {
      labelCol: { md: { span: 7 } },
      wrapperCol: { md: { span: 17 } },
    };

    return (
      <PageHeaderWrapper>
        <Card className={styles.searchCard} bordered={false}>
          <div className={styles.tableListForm}>
            <Form layout="inline">
              <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
                <Col md={8} sm={24}>
                  <FormItem {...formItemLayout} label={<span>地区</span>}>
                    {getFieldDecorator('areaId', {
                      rules: [
                        {
                          message: '请选择地区',
                        },
                      ],
                      initialValue: formFieldsValue.areaId,
                    })(
                      <Select
                        allowClear
                        showSearch
                        filterOption={(input, option) =>
                          option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                        }
                        style={{ width: '100%' }}
                        placeholder="请选择"
                      >
                        {areaList.map(value => (
                          <Option key={value.areaId}>{value.areaName}</Option>
                        ))}
                      </Select>
                    )}
                  </FormItem>
                </Col>
                <Col md={8} sm={24}>
                  <FormItem label="采集日期" {...formItemLayout}>
                    {getFieldDecorator('dateArr', {
                      initialValue: formFieldsValue.dateArr,
                    })(<RangePicker style={{ width: '100%' }} />)}
                  </FormItem>
                </Col>
                <Col md={8} sm={24}>
                  <div style={{ marginBottom: 24 }}>
                    <Button type="primary" onClick={() => this.getList(activeKey)}>
                      查询
                    </Button>
                    <Button style={{ marginLeft: 8 }} onClick={this.handleFormReset}>
                      重置
                    </Button>
                  </div>
                </Col>
              </Row>
            </Form>
          </div>
        </Card>
        <Card className={styles.tabCard}>
          <div className={styles.tableList}>
            {/* <TabList  tabData={this.state.tabList}/> */}
            <Tabs activeKey={activeKey} onChange={this.stateChange}>
              {tabList.map(pane => (
                <TabPane tab={pane.itemName} key={pane.itemCode}>
                  {tabPaneTem[pane.itemCode]}
                </TabPane>
              ))}
            </Tabs>
          </div>
        </Card>
        <Modal
          title="导出申报明细表"
          visible={declarationFlag}
          onOk={this.handleDeclarationOk}
          onCancel={this.handleDeclarationCancel}
          okText="导出"
          cancelText="取消"
          destroyOnClose
        >
          <Row>
            <Col md={12} style={{ textAlign: 'right' }}>
              导出地区：
            </Col>
            <Col md={12}>{clt.areaName || '--'}</Col>
            <Col md={12} style={{ textAlign: 'right' }}>
              采集人员年月：
            </Col>
            <Col md={12}>{moment(clt.adjYm).format('YYYY-MM') || '--'}</Col>
            {clt.adjUpdtYm ? (
              <Fragment>
                <Col md={12} style={{ textAlign: 'right' }}>
                  更新采集人员年月：
                </Col>
                <Col md={12}>{moment(clt.adjUpdtYm).format('YYYY-MM') || '--'}</Col>
              </Fragment>
            ) : null}
            <Col md={12} style={{ textAlign: 'right' }}>
              开始生效年月：
            </Col>
            <Col md={12}>{moment(clt.validYm).format('YYYY-MM')}</Col>
          </Row>
        </Modal>
        <Modal
          title="开始申报"
          visible={filingFlag}
          okText="开始申报"
          cancelText="取消"
          onOk={this.handleFilingOk}
          onCancel={this.handleFilingCancel}
          destroyOnClose
        >
          <Row>
            <Col md={12} style={{ textAlign: 'right' }}>
              导出地区：
            </Col>
            <Col md={12}>{clt.areaName || '--'}</Col>
            <Col md={12} style={{ textAlign: 'right' }}>
              采集人员年月：
            </Col>
            <Col md={12}>{moment(clt.adjYm).format('YYYY-MM') || '--'}</Col>
            {clt.adjUpdtYm ? (
              <Fragment>
                <Col md={12} style={{ textAlign: 'right' }}>
                  更新采集人员年月：
                </Col>
                <Col md={12}>{moment(clt.adjUpdtYm).format('YYYY-MM') || '--'}</Col>
              </Fragment>
            ) : null}
            <Col md={12} style={{ textAlign: 'right' }}>
              开始生效年月：
            </Col>
            <Col md={12}>{moment(clt.validYm).format('YYYY-MM')}</Col>
          </Row>
        </Modal>
        <Modal
          title="下载采集表"
          visible={downloadCollectionFlag}
          onOk={this.handleConllectionOk}
          onCancel={this.handleConllectionCancel}
          destroyOnClose
        >
          <Form layout="vertical">
            <Row>
              <FormItem label="下载采集表险种工资是否合并一列显示？">
                {getFieldDecorator('mergeFlag', {
                  rules: [{ required: true }],
                })(
                  <Select
                    allowClear
                    showSearch
                    filterOption={(input, option) =>
                      option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                    }
                    placeholder="请选择"
                    style={{ width: '50%' }}
                  >
                    {EXPORT_MERGE_TYPE.map(item => (
                      <Option key={item.itemCode}>{item.itemName}</Option>
                    ))}
                  </Select>
                )}
              </FormItem>
            </Row>
          </Form>
        </Modal>
      </PageHeaderWrapper>
    );
  }
}

export default AdjustBase;
